<template>
  <!--新增/编辑-->
  <el-dialog
    :close-on-click-modal="false"
    :title="title2"
    :beforeClose="handleClose2"
    :visible.sync="dialogVisible2"
    width="500px">
    <el-form :model="form" size="mini" label-width="120px" :rules="rules" ref="form">
      <el-form-item label="客户名称：">
        {{form.customerName}}
      </el-form-item>
      <el-form-item label="产品线：" prop="goodsLineId" v-if="popType =='add' ">
        <el-select v-model="form.goodsLineId"  @change="changeGoodsId">
          <el-option :label="item.userName != '' ? item.cddValue +  ' / '+item.userName : item.cddValue" v-for="item in goodsLineList" :value="item.cddId" :key="item.cddId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品线：" prop="goodsLineId" v-else>
         {{form.goodsLineName}}
      </el-form-item>
      <el-form-item label="使用产品：" prop="goodsKingIds">
          <el-select v-model="form.goodsKingIds" multiple placeholder="请选择" filterable>
            <el-option
              v-for="item in goodsList"
              :key="item.kingId"
              :label="item.goodsSn"
              :value="item.kingId">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="月使用量：" >
        <el-input v-model="form.cglMonthBuyNum" style="width:120px;"></el-input><span style="padding-left:5px;">吨</span>
      </el-form-item>

      <el-form-item label="竞争对手情况：" >
        <el-select v-model="form.cglCompetitorInfo">
          <el-option v-for="item in cglCompetitorInfoList"  :value="item.cddId" :label="item.cddValue" :key="item.cddId"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="竞争对手类型：" >
        <el-radio-group v-model="form.cglCompetitorType">
          <el-radio :label="item.cddValue" v-for="item in cglCompetitorTypeList" :key="item.cddValue">{{ item.cddValue }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="支付方式：" >
        <el-select v-model="form.cglPayMethod">
          <el-option v-for="item in payMethodList"  :value="item.cddValue" :label="item.cddValue" :key="item.cddValue"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="产品匹配度：">
        <el-select v-model="form.goodsMatchDegree">
          <el-option v-for="(item,index) in goodsMatchDegreeList" :value="item.cddValue" :label="item.cddValue" :key="item.cddValue"></el-option>
        </el-select>
      </el-form-item>
      <el-divider>完成以上信息进阶</el-divider>
      <el-form-item label="规模：" >
        <el-input v-model="form.cglScale" style="width:120px;"></el-input><span style="padding-left:5px;">人</span>
      </el-form-item>

      <el-form-item label="开工率：" >
        <el-input v-model="form.cglOperatingRate" style="width:120px;"></el-input>
      </el-form-item>



      <el-form-item label="客户关注点：" >
        <el-select v-model="form.cglCustomerFocus" multiple>
          <el-option v-for="item in customerFocusList"  :value="item.cddId" :label="item.cddValue" :key="item.cddValue"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="采购习惯：" >
        <el-select v-model="form.cglBuyHabits">
          <el-option v-for="item in purchasingHabitsList"  :value="item.cddId" :label="item.cddValue" :key="item.cddValue"></el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <div style="font-size:12px;color:red;padding-left:40px">注：维护使用产品，月用量，竞争对手，付款方式，产品匹配信息 完成进阶</div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose2">取 消</el-button>
        <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {getCustomerSetting,orderGoodsList} from '@/api/partner'
import {developAddGoodsLine,developUpdateGoodsLine,developGoodsLineInfo,goodLineByCustomer} from '@/api/company'
import {validatePhone} from '@/utils/validate';
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'



const defaultForm = {
  goodsLineId:'',
  goodsSn:'',
  cglMonthBuyNum:'',
  cglCompetitorInfo:'',
  cglCompetitorType:'',
  cglScale:'',
  cglOperatingRate:'',
  cglPayMethod:'',
  goodsMatchDegree:'',
  cglCustomerFocus:[],
  cglBuyHabits:'',
  goodsKingIds:[]
};
export default {
  name: "index",
  data(){

    return {
      dialogVisible2:false,
      title2:'',
      btnLoading2:false,
      form:JSON.parse(JSON.stringify(defaultForm)),
      rules:{
        goodsLineId:[{required: true, message: '此项必填', trigger: 'change'},],
        goodsKingIds:[{required: true, message: '此项必填', trigger: 'change'},],
      },
      goodsLineList:[],
      cglCompetitorInfoList:[],
      cglCompetitorTypeList:[],
      payMethodList:[],
      goodsList:[],
      customerFocusList:[],
      goodsMatchDegreeList:[],
      purchasingHabitsList:[],
      popType:''
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {

  },
  filters: {

  },
  methods:{
    getGoodsLineList(){
      goodLineByCustomer({customerId:this.form.customerId}).then((res)=>{
        this.goodsLineList = res
      })
    },

    //显示
    showPop(type,item){
      this.dialogVisible2 = true;
      this.popType = type;
      this.title2 = type == 'add' ? '新增产品线' : '编辑产品线';
      if(type == 'add'){
        this.form = JSON.parse(JSON.stringify(defaultForm));
        this.form.customerName = item.customerName;
        this.form.customerId = item.customerId;
      }else{
        developGoodsLineInfo({cglId:item.cglId}).then((res)=>{
          this.form = JSON.parse(JSON.stringify(res))
          this.form.cglCustomerFocus = [];
          res.cglCustomerFocus.forEach((el)=>{
            this.form.cglCustomerFocus.push(parseInt(el))
          })
          this.form.goodsKingIds = item.goodsKingIds  ? item.goodsKingIds.split(",") : [];
          this.form.goodsKingIds.forEach((el,index)=>{
            this.form.goodsKingIds[index] = parseInt(el)
          })
          this.form.customerName = item.customerName;
          this.form.customerId = item.customerId;
          this.getGoodsList()
        })
      }
      this.getCustomerSettingList();
      this.getGoodsLineList()
    },

    changeGoodsId(){
       this.form.goodsKingIds = [];
       this.goodsList = [];
       this.getGoodsList();
    },

    getGoodsList(){
        orderGoodsList({goodsLineId:this.form.goodsLineId}).then((res)=>{
          this.goodsList = res.list
        })
    },

    //关闭跟进弹窗
    handleClose2(){
      this.$refs.form.clearValidate();
      this.dialogVisible2 = false;
      this.btnLoading2 = false;
    },

    //提交跟进
    handleConfirm2(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading2 = true;
          let data = JSON.parse(JSON.stringify(this.form));
          data.cglCustomerFocus = data.cglCustomerFocus.join(",");
          data.goodsKingIds = data.goodsKingIds.join(",")
          let fn = developAddGoodsLine;
          if(this.popType == 'edit'){
            fn = developUpdateGoodsLine
          }
          fn(data).then((res)=>{
            this.btnLoading2 = false;
            this.handleClose2();
            this.$emit('getList');
          }).catch(()=>{
            this.btnLoading2 = false;
          })
        }
      })
    },


    //获取客户配置
    getCustomerSettingList(){
      getCustomerSetting().then((res)=>{
        res.forEach((el)=>{
         if(el.cdtCode == 'pay_method'){
            this.payMethodList = el.data;
          }else if(el.cdtCode == 'cgl_competitor_info'){
            this.cglCompetitorInfoList = el.data;
          }else if(el.cdtCode == 'cgl_competitor_type'){
            this.cglCompetitorTypeList = el.data;
          }else if(el.cdtCode == 'customer_focus'){
            this.customerFocusList = el.data
          }else if(el.cdtCode == 'goods_match_degree'){
           this.goodsMatchDegreeList = el.data
         }else if(el.cdtCode == 'purchasing_habits'){
           this.purchasingHabitsList = el.data
         }
        });
      })
    },
  },
}
</script>

<style  lang="scss">
.avatar-uploader{
  margin-bottom:10px;
  display: inline-block;
  width:80px;
  height:80px;
  border:1px solid #DCDFE6;
  text-align: center;
  line-height: 80px;
  vertical-align: middle;
}
</style>
